<template>
  <div class="banner">
    All Blogs
  </div>
  <br>
  <el-row>
    <el-col :span="4"></el-col>
    <el-col :span="16">
      <el-card>
        <el-form
            :label-position="'top'"
            label-width="100px"
            :model="conditionForm"
            inline
        >
          <el-form-item label="关键字">
            <el-input v-model="conditionForm.searchText" @keydown.enter="init" placeholder="Key words"/>
          </el-form-item>
          <el-form-item label="分类:" prop="categoryId">
            <el-select v-model="conditionForm.categoryId" filterable clearable
                       @clear="conditionForm.categoryId = null"
                       placeholder="Select category">
              <el-option
                  v-for="item in categories"
                  :key="item.categoryId"
                  :label="item.categoryName"
                  :value="item.categoryId"
                  :disabled="!item.isUse"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="标签（多选）:">
            <el-select v-model="conditionForm.tagIdList"
                       multiple
                       clearable
                       filterable
                       placeholder="Select Tag">
              <el-option
                  v-for="item in tags"
                  :key="item.tagId"
                  :label="item.tagName"
                  :value="item.tagId"
                  :disabled="!item.isUse"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="置顶:">
            <el-radio-group v-model="conditionForm.isTop">
              <el-radio :label="null">全部</el-radio>
              <el-radio :label="false">否</el-radio>
              <el-radio :label="true">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="发布日期范围">
            <el-col :span="11">
              <el-date-picker
                  v-model="conditionForm.beginCreateTime"
                  type="date"
                  placeholder="Pick a start date"
                  style="width: 100%"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-col>
            <el-col :span="2" style="text-align: center;">
              <span>-</span>
            </el-col>
            <el-col :span="11">
              <el-date-picker
                  v-model="conditionForm.endCreateTime"
                  placeholder="Pick a end time"
                  style="width: 100%"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD 23:59:59"
              />
            </el-col>
          </el-form-item>
          <el-form-item label="排序">
            <el-switch
                v-model="conditionForm.orderBy"
                active-value="asc"
                active-text="id 升序"
                inactive-value="desc"
                inactive-text="id 降序"
            />
          </el-form-item>
          <el-form-item label="-">
            <el-button type="primary" @click="init">查询</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <el-divider></el-divider>

      <div v-if="total>0" style="display: flex;flex-wrap:wrap">
        <el-card v-for="item in blogs" style="width: 24%;margin: 10px 0.5%"
                 :body-style="{padding:'0px'}">
          <el-image :src="item.blogImg"
                    fit="cover"
                    @click="toViewBlog(item.blogId)"
                    style="width: 100%;height: 180px">
          </el-image>
          <div style="padding: 10px">
            <el-link class="blog_title" @click="toViewBlog(item.blogId)">{{ item.blogTitle }}</el-link>
            <el-divider></el-divider>
            <span><el-icon><Clock/></el-icon>：{{ item.releaseTime }}</span> <br>
            <el-icon>
              <Discount/>
            </el-icon>
            ：
            <el-tag v-for="tag in item.tags" :key="item.tagId">{{ tag.tagName }}</el-tag>
          </div>
        </el-card>
      </div>
      <el-card v-else style="height: 40vh;text-align: center;padding-top: 100px">
        <h2 style="font-weight: bolder;color: #257763">当前条件下没有数据</h2>
      </el-card>


      <el-divider></el-divider>
      <!--分页-->
      <div style="display: flex;">
        <el-pagination
            v-model:current-page="conditionForm.pageNum"
            v-model:page-size="conditionForm.pageSize"
            :page-sizes="[16, 32, 48, 64]"
            :small="true"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            style="margin: auto;"
        />
      </div>

    </el-col>
    <el-col :span="4"></el-col>
  </el-row>

</template>

<script>
export default {
  name: "AllBlogs",
  data() {
    return {
      categories: [],
      tags: [],
      conditionForm: {
        pageSize: 16,
        pageNum: 1,
        searchText: '',
        categoryId: null,
        tagIdList: null,
        isTop: null,
        beginCreateTime: null,
        endCreateTime: null,
        orderBy: "asc"
      },
      total:null,
      current: 1,
      size: 16,
      blogs:[],

    }
  },
  created() {
    this.uploadCategories()
    this.uploadTags()
    this.init()
  },
  methods: {
    async init() {
      let {data: result} = await this.$http.post('/api/blog/condition', this.conditionForm)
      console.log(result.dataMap.page)
      this.blogs = result.dataMap.page.records
      this.conditionForm.pageNum = result.dataMap.page.current
      this.total = result.dataMap.page.total
      this.conditionForm.pageSize = result.dataMap.page.size
    },
    async uploadCategories() {
      let {data: categories} = await this.$http.get('/api/category/getAllCategories')
      this.categories = categories
    },
    async uploadTags() {
      let {data: tags} = await this.$http.get('/api/tag/getAllTags')
      this.tags = tags
    },
    toViewBlog(blogId) {
      this.$router.push({path: '/article/' + blogId})
    },
    // 分页大小改变
    handleSizeChange() {
      this.init()
    },
    // 分页页数改变
    handleCurrentChange() {
      this.init()
    },
  }

}
</script>

<style scoped>
.banner {
  background-image: url('/headImg/all.jpg');
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  height: 400px;
  width: 100%;

  color: white;
  font-size: 3em;
  font-weight: bolder;
  text-align: center;
  padding-top: 200px;
}
</style>